{% extends 'base.html' %}

{% block extrahead%}
<style type="text/css">
#map
{
    width:940px;
    height:400px;
    margin:0 auto;
    clear:both;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var degrees2radians = function(degrees) {
    return (degrees * Math.PI) / 180;
};
var radians2degrees = function(radians) {
    return (radians * 180) / Math.PI;
};
var radius = 6378137;
var lng2X = function(lngDegrees) {
    var lng = degrees2radians(lngDegrees);
    return radius * lng;
};
var lat2Y = function(latDegrees) {
    var lat = degrees2radians(latDegrees);
    return (radius / 2.0) * Math.log((1.0 + Math.sin(lat)) / (1.0 - Math.sin(lat)));
};
var latlng2XY = function(latlng) {
    var point = new Object();
    point.X = lng2X(latlng.lng());
    point.Y = lat2Y(latlng.lat());
    return point
};
    
dojo.addOnLoad(function(){
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(37.597, -77.444),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    
    var getWMSTileUrl = function(tile, zoom) {
        var projection = map.getProjection();
        var zpow = Math.pow(2, zoom);
        var ul = new google.maps.Point(tile.x * 256.0 / zpow, (tile.y + 1) * 256.0 / zpow);
        var lr = new google.maps.Point((tile.x + 1) * 256.0 / zpow, (tile.y) * 256.0 / zpow);
        var ulw = projection.fromPointToLatLng(ul);
        var lrw = projection.fromPointToLatLng(lr);
        ulw = latlng2XY(ulw);
        lrw = latlng2XY(lrw);
        //The user will enter the address to the public WMS layer here.  The data must be in WGS84
        var baseURL = "http://sampleserver1.arcgisonline.com/arcgis/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer?&REQUEST=GetMap&SERVICE=WMS&VERSION=1.3&LAYERS="; //begining of the WMS URL ending with a "?" or a "&".
        var format = "image/png"; //type of image returned  or image/jpeg
        //The layer ID.  Can be found when using the layers properties tool in ArcMap
        var layers = "0,1,2"; 
        var srs = "EPSG:102100"; //projection to display. This is the projection of google map. Don't change unless you know what you are doing.
        var bbox = ulw.X + "," + ulw.Y + "," + lrw.X + "," + lrw.Y;
        //Add the components of the URL together
        var url = baseURL + layers + "&Styles=,," + "&CRS=" + srs + "&BBOX=" + bbox + "&width=256" + "&height=256" + "&format=" + format + "&BGCOLOR=0xFFFFFF&TRANSPARENT=true";
        return url;
    }
    var wmsOptions = {
        tileSize: new google.maps.Size(256, 256),
        opacity: 0.5,
        isPng: true,
        getTileUrl: getWMSTileUrl
    };
    var wmsMapType = new google.maps.ImageMapType(wmsOptions);
    map.overlayMapTypes.insertAt(0, wmsMapType);
});
</script>
{% endblock %}

{% block content %}
<div id='map'></div>
{% endblock %}